import React from 'react';
import {Modal} from 'antd';
import _ from 'lodash';
import Table, {
    setColumnKeys,
    yesRender
} from '../_/table';
export default class EditorSelRole extends React.Component {
    state = {}
    onOk = () => {
        const {selectedRows: [{Id} = {}] = []} = this.state;
        this.reset();
        this.props.onState('selRoleOk', Id);
    }
    onCancel = () => {
        this.reset();
        this.props.onState('selRoleCancel');
    }
    onRowSelection = (selectedRow, selectedRowKey) => {
        this.setState({selectedRows: [selectedRow], selectedRowKeys: [selectedRowKey]});
    }
    reset = () => this.setState({selectedRowKeys: [], selectedRows: []});

    render() {
        const {data} = this.props;
        const dataSource = _.filter(data, i => i.Status);
        const columns = [{
            title: '编码',
            dataIndex: 'Code'
        }, {
            title: '名称',
            dataIndex: 'Name'
        }, {
            title: '状态',
            dataIndex: 'Status',
            render: yesRender
        }];
        setColumnKeys(columns);
        const rowSelection = {
            type: 'radio',
            selectedRowKeys: this.state.selectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({selectedRowKeys, selectedRows});
            },
        };
        return (
            <div>
                <Modal
                    width={this.props.width}
                    title="选择角色"
                    okText="选择"
                    maskClosable={false}
                    onOk={this.onOk}
                    onCancel={this.onCancel}
                    wrapClassName={`editorSelDepartmenModal`}
                    visible={this.props.visible}
                >
                    <Table
                        size="small"
                        rowSelection={rowSelection}
                        dataSource={dataSource}
                        columns={columns}
                        pagination={false}
                        onRowClick={this.onRowSelection}
                    />
                </Modal>
            </div>
        );
    }
}
